import * as React from 'react'
import { Layout } from 'element-react';
import 'element-theme-default';
class Home extends React.Component {
    render() {
        return (
            <div style={{ display: 'flex', flex: 1, background: 'rgba(81,135,244)', flexDirection: 'column' }}>
                <div>
                    <Layout.Row type="flex" className="row-bg" style={{ background: 'rgba(81,135,244)', padding: 10, }}>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                <div style={{ color: 'white', fontWeight: 'bold' }}>
                                    361
                                </div>
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>参与选手</div>
                            </div>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', }}>
                                <div style={{ color: 'white', fontWeight: 'bold' }}>2015</div>
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>统计投票</div>
                            </div>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                <div style={{ color: 'white', fontWeight: 'bold' }}>1240</div>
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>访问总量</div>
                            </div>
                        </Layout.Col>
                    </Layout.Row>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: 20 }}>
                    <img style={{ height: 150, width: '' }} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565373447603&di=6bfa03c5c181115750a715d384af3c99&imgtype=0&src=http%3A%2F%2Fpic18.nipic.com%2F20120108%2F3631203_203811096335_2.jpg" />
                </div>
                <div>
                    <Layout.Row type="flex" className="row-bg" style={{ background: 'rgba(81,135,244)', padding: 10, }}>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', borderRightWidth: 1, borderRightStyle: 'solid', borderRightColor: 'white' }}>
                            <img style={{ height: 150, width: 'auto' }} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565373447603&di=6bfa03c5c181115750a715d384af3c99&imgtype=0&src=http%3A%2F%2Fpic18.nipic.com%2F20120108%2F3631203_203811096335_2.jpg" />
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>参与选手</div>
                            </div>

                        </Layout.Col>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', borderRightWidth: 1, borderRightStyle: 'solid', borderRightColor: 'white' }}>
                                <div style={{ color: 'white', fontWeight: 'bold' }}>2015</div>
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>统计投票</div>
                            </div>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                <div style={{ color: 'white', fontWeight: 'bold' }}>1240</div>
                                <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>访问总量</div>
                            </div>
                        </Layout.Col>
                    </Layout.Row>
                </div>
                <div style={styles.bg} className='home'>
                    <div
                        style={{
                            position: 'fixed', bottom: 0, left: 0, width: '100%', background: 'rgba(245,245,245)', height: 50
                        }}>
                        <Layout.Row>
                            <Layout.Col span="5">
                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                    <img src={require('../../static/home.png')} style={{ height: 20, width: 'auto' }} />
                                </div>
                                <div className="grid-content bg-purple" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/home' }}>首页</div>
                            </Layout.Col>
                            <Layout.Col span="5">
                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                    <img src={require('../../static/paihangbang.png')} style={{ color: "red", height: 20, width: 'auto' }} />
                                </div>
                                <div className="grid-content bg-purple-light" style={{ color: "red", textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/paihangbang' }}>排行榜</div>
                            </Layout.Col>
                            <Layout.Col span="5">
                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                    <img src={require('../../static/choujiang.png')} style={{ height: 20, width: 'auto' }} />
                                </div>
                                <div className="grid-content bg-purple" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/zhuanpan' }}>幸运抽奖</div>
                            </Layout.Col>
                            <Layout.Col span="5">
                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                    <img src={require('../../static/paihangbang.png')} style={{ height: 20, width: 'auto' }} />
                                </div>
                                <div className="grid-content bg-purple" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/zhuanpan' }}>奖品</div>
                            </Layout.Col>
                            <Layout.Col span="4">
                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                    <img src={require('../../static/baoming.png')} style={{ height: 20, width: 'auto' }} />
                                </div>
                                <div className="grid-content bg-purple-light" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/setting' }}>我要报名</div>
                            </Layout.Col>
                        </Layout.Row>
                    </div>
                </div>
            </div>
        )
    }
}

const styles: any = {
    bg: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%'
    }
}

export default Home